<template>
  <!-- <div class="app-container"> -->
    <div class="container-bg">
      <el-row :gutter="15">
        <el-form
          ref="elForm"
          :model="form"
          :rules="form.iEnable ? rules : {}"
          :validate-on-rule-change="true"
          size="medium"
          label-width="150px"
          style="max-width: 1200px"
        >
          <el-col :span="24">
            <el-form-item label="视频对讲">
              <el-switch
                v-model="form.iEnable"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="对讲地址盒" class="form-item-title">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="传输协议" prop="iTransportProtocol">
              <el-select
                v-model="form.iTransportProtocol"
                type="number"
                placeholder="请选择"
                :disabled="!form.iEnable">
                <el-option label="UDP" :value="0"></el-option>
                <el-option label="TCP" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SIP服务器地址" prop="sSipServerAddress">
              <el-input
                v-model="form.sSipServerAddress"
                placeholder="请输入SIP服务器地址"
                clearable
                :disabled="!form.iEnable"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="sPassword">
              <el-input
                v-model.trim="form.sPassword"
                placeholder="请输入密码"
                type="password"
                show-password
                clearable
                :disabled="!form.iEnable"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SIP服务器端口" prop="iSipServerPort">
              <el-input
                v-model="form.iSipServerPort"
                placeholder="请输入SIP服务器端口"
                clearable
                :disabled="!form.iEnable"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="确认密码" prop="secondSPassword">
              <el-input
                v-model.trim="form.secondSPassword"
                placeholder="请再次输入密码"
                type="password"
                show-password
                clearable
                :disabled="!form.iEnable"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册间隔" prop="iRegistrationInterval">
              <el-input
                v-model="form.iRegistrationInterval"
                placeholder="请输入注册间隔"
                clearable
                :disabled="!form.iEnable"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="心跳周期" prop="iHeartbeatCycle">
              <el-input
                v-model="form.iHeartbeatCycle"
                placeholder="请输入心跳周期"
                clearable
                :disabled="!form.iEnable"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大心跳超时次数" prop="iMaxHeartbeatTimeout">
              <el-input
                v-model="form.iMaxHeartbeatTimeout"
                placeholder="请输入最大心跳超时次数"
                clearable
                :disabled="!form.iEnable"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="对讲主机" class="form-item-title">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主机号" prop="sHostNumber">
              <el-input
                v-model="form.sHostNumber"
                placeholder="请输入主机号"
                clearable
                :disabled="!form.iEnable"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="本地配置" class="form-item-title">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备IP" prop="sSipLocalIp">
              <el-input
                v-model="form.sSipLocalIp"
                placeholder="请输入设备IP"
                clearable
                readonly="true"
                :disabled="true"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分机号" prop="sSipAuthId">
              <el-input
                v-model="form.sSipAuthId"
                placeholder="请输入分机号"
                clearable
                :disabled="!form.iEnable"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="本地SIP端口" prop="iSipLocalPort">
              <el-input
                v-model="form.iSipLocalPort"
                placeholder="请输入本地SIP端口"
                clearable
                :disabled="!form.iEnable"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item>
              <el-button
                type="primary"
                size="medium"
                style="width: 120px"
                @click="submitForm('elForm')"
              >
                保存
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
  <!-- </div> -->
</template>

<script>
import { getTalkConfigApi, editTalkConfigApi } from "@/api/network";
import { Loading } from 'element-ui'

export default {
  props: {},
  data() {
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.sPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      // 确认密码
      secondSPassword: '',
      // formPrev: {},
      form: {
        iEnable: 0,  // 对讲开关, 0:关,1:开
        iTransportProtocol: 0,  // sip传输协议, 0:UDP,1:TCp
        sPassword: '',  // SIP服务端通讯密码
        secondSPassword: '',
        sSipServerAddress: '',  // SIP服务器IP
        iSipServerPort:5067,  // SIP服务器端口号 (1~65535)
        iRegistrationInterval: 60,  // 注册时间间隔(单位s)(1~3600)
        iHeartbeatCycle: 60,  // 心跳时间（单位s）(1~3600)    默认值 60
        iMaxHeartbeatTimeout: 3,  // 心跳超时次数 (1~3600)    默认值 3
        sHostNumber: '',  // 主机号 (最多16位数字)  不同设备号码不可冲突,示例 4311
        sSipLocalIp: '172.31.39.22',  // 设备的IP
        sSipAuthId: '',  // 分机号(SIP用户认证ID) (最多16位数字)  不同设备号码不可冲突,示例 4321
        iSipLocalPort: 5078  // 本地sip端口 (1~65535)   默认值5070
      },
      rules: {
        iTransportProtocol: [
          { required: true, trigger: "blur" },
        ],
        sPassword: [
          // { required: true, message: "密码不能为空", trigger: "blur" },
          {
            pattern:
              /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])[A-Za-z0-9!@#$%^&*]{12,32}$/,
            message: "12-32位,同时包含数字、大小写字母、特殊符号",
            trigger: "blur",
          },
        ],
        secondSPassword: [
          // { required: true, message: "确认密码不能为空", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
        sSipServerAddress: [
          {required: true, trigger: "blur", message: "不能为空"},
          {
            pattern:
              /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
            message: "请输入正确的格式",
            trigger: "blur",
          },
        ],
        iSipServerPort: [
          {required: true, trigger: "blur", message: "不能为空"},
          {
            type: 'number',
            min: 1,
            max: 65535,
            message: "请输入1~65535之间的数字",
            trigger: "blur",
          },
        ],
        iRegistrationInterval: [
          {required: true, trigger: "blur", message: "不能为空"}
        ],
        iHeartbeatCycle: [
          {required: true, trigger: "blur", message: "不能为空"}
        ],
        iMaxHeartbeatTimeout: [
          {required: true, trigger: "blur", message: "不能为空"}
        ],
        sHostNumber: [
          {required: true, trigger: "blur", message: "不能为空"}
        ],
        sSipAuthId: [
          {required: true, trigger: "blur", message: "不能为空"}
        ],
        iSipLocalPort: [
          {required: true, trigger: "blur", message: "不能为空"}
        ],
        // "ipv4.sV4Address": [
        //   {required: true, trigger: "blur", message: "不能为空"},
        //   {
        //     pattern:
        //       /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
        //     message: "请输入正确的格式",
        //     trigger: "blur",
        //   },
        // ],
        // "link.sDNS1": [
        //   // { required: true, trigger: "blur", message: "不能为空" },
        //   {
        //     pattern:
        //       /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
        //     message: "请输入正确的格式",
        //     trigger: "blur",
        //   },
        // ],
        // "ipv4.sV4Gateway": [
        //   {required: true, trigger: "blur", message: "不能为空"},
        //   {
        //     pattern:
        //       /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
        //     message: "请输入正确的格式",
        //     trigger: "blur",
        //   },
        // ],
        // "link.sDNS2": [
        //   // { required: true, trigger: "blur", message: "不能为空" },
        //   {
        //     pattern:
        //       /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
        //     message: "请输入正确的格式",
        //     trigger: "blur",
        //   },
        // ],
        // "ipv4.sV4Netmask": [
        //   {required: true, trigger: "blur", message: "不能为空"},
        //   {
        //     pattern:
        //       /^((128|192)|2(24|4[08]|5[245]))(\.(0|(128|192)|2((24)|(4[08])|(5[245])))){3}$/,
        //     message: "请输入正确的格式",
        //     trigger: "blur",
        //   },
        // ],
      },
    };
  },
  created() {
    this.getTalkConfig();
  },
  mounted() {
  },
  methods: {
    startLoading() {
      this.loading= Loading.service({
        lock:true,
        text:"",
        background:'rgba(0,0,0,0.3)',
      })
    },
    endLoading() {
      this.loading.close();
    },
    getTalkConfig() {
      getTalkConfigApi().then((res) => {
        this.form = {...res};
        // this.formPrev = JSON.parse(JSON.stringify(this.form));
        // console.log(200, this.formPrev);
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          delete this.form.secondSPassword
          this.startLoading();
          console.log(244, this.form);
          console.log(245, this.formPrev);
          editTalkConfigApi(this.form).then((res) => {
            // if (JSON.stringify(this.formPrev) === JSON.stringify(this.form)) {
              this.$message.success("保存成功");
              this.endLoading();
            // } else {
            //   this.$message.success("保存成功");
            //   if (this.form.sV4Method != 'dhcp') {
            //     this.loading.setText('修改IP中，请耐心等待');
            //   }
            //   setTimeout(() => {
            //     let newIP = this.form.ipv4.sV4Address;
            //     window.location.href = window.location.protocol + '//' + newIP + '/index';
            //     endLoading();
            //   }, 10000);
            // }
          }).catch(err => {
            this.$message.error(err)
            this.endLoading();
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-loading-mask {
  margin-top: 40%;
}

/deep/ .form-item-title {

  .el-form-item__label {
    font-size: 18px;
  }
}
</style>
